import React, { useState,useRef  } from "react";
import { Input, Button, message as antMessage,Tooltip  } from "antd";
import { useChatStore } from "@/store";
import { LoginOutlined,FileImageOutlined,FileTextOutlined } from "@ant-design/icons";
import "./index.css";
import { useNavigate } from "react-router-dom";
interface CreateInputProps {  
  loading: boolean;
  onSendMessage: (data: any) => void;
}
export default React.FC<CreateInputProps> = (props: CreateInputProps) => {
  const { loading, onSendMessage } = props
  const [sendType,setSendType] = useState('text')
  const navigate = useNavigate();
  const { answerCreating, updateAnswerCreatingAction } = useChatStore((state) => state)
  const [message, setMessage] = useState("");
  const iconBaseStyle = {fontSize: '18px'}
  const onChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setMessage(e.target.value);
  };
  const createChatAction = () => {
    if (message.trim() === "") {
      antMessage.warning({
        content: '请输入问题~',
      });
      return
    }
    updateAnswerCreatingAction(true)
    onSendMessage({
      message: message,
      sendType: sendType
    });
    setMessage("");
  };
  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      createChatAction();
    }
  };
  const handleSendType = (type: string) => {
    setSendType(type)
  }
  const goToLogin = () => {
    navigate('/login')
  }
  return (
    <>
      <div className="c_create_input_wrapper">
        <textarea value={message} onChange={onChange} onKeyDown={onKeyDown} placeholder="你 想 知 道 啥 呢 ？" />
        <div className="c_create_option_wrapper">
          <Tooltip placement="top" title='登 录'>
            <LoginOutlined className="c_mr16 c_pointer" style={...iconBaseStyle} onClick={goToLogin} />
          </Tooltip>
          <Tooltip placement="top" title='文本生成'>
            <FileTextOutlined className="c_mr16 c_pointer" style={
              {...iconBaseStyle,color:sendType === 'text' ? '#1677FF' : undefined}
            } onClick={() => handleSendType('text')} />
          </Tooltip>
          <Tooltip placement="top" title='图像生成'>
            <FileImageOutlined className="c_mr16 c_pointer" onClick={() => handleSendType('image')} style={
              {...iconBaseStyle,color:sendType === 'image' ? '#1677FF' : undefined}
            }/>
          </Tooltip>
          <Button type="primary" loading={answerCreating} iconPosition="end" onClick={createChatAction}>
            { answerCreating ? '输 出 中' : '发 送' }
          </Button>
        </div>
      </div>
    </>
  );
};
